import { showMessage } from '@/components/antd-comp/message'
import ModalComponent from '@/components/antd-comp/modal/ModalComponent'
import type { TreeProps } from 'antd'
import { Empty, Tree } from 'antd'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import '../../pages/FileLibPage/css/index.css'
import './index.less'

/* 
分配权限
//演示 
import AccreditDia from '@/components/accreditDia/AccreditDia'


const [accredit, setAccredit] = useState(false)

setAccredit(true)

{accredit && (
  <AccreditDia
    cancel={() => {
      setAccredit(false)
    }}
    submit={() => {
      setAccredit(false)
    }}
  />
)}

//传参数
<AccreditDia
  defoptions={options}
  optionsValues={optionsValues}
  cancel={e => {
    setAccredit(false)
  }}
  submit={(checkedValues) => {
    // tagsSubmit(checkedValues)
    setAccredit(false)
  }}
/>

*/
// const AccreditDia = ({ defoptions, cancel, submit, optionsValues }) => {
const AccreditDia = ({ cancel, submit }) => {
  const { t } = useTranslation()
  /* 选中数据 */
  // checkBox 选中
  const [checkedValues, setcheckedValues] = useState([]) as any
  // 重新生成loading
  // const [tagLoading, settagLoading] = useState(false)

  /* list */
  const [options, setoptions] = useState([
    {
      title: 'AI产品部',
      key: 'AI产品部',
      children: [
        { title: '王润梅', key: '王润梅' },
        { title: '李天杰', key: '李天杰' },
        { title: '李宁欣', key: '李宁欣' },
        { title: '吴晓旭', key: '吴晓旭' },
        { title: '张晟瑜', key: '张晟瑜' }
      ]
    },
    {
      title: '大前端研发部',
      key: '大前端研发部',
      children: [
        { title: '张圆', key: '张圆' },
        { title: '邢翠翠', key: '邢翠翠' },
        { title: '黄云龙', key: '黄云龙' },
        { title: '张玉红', key: '张玉红' }
      ]
    },
    {
      title: '平台质量部',
      key: '平台质量部',
      children: [
        { title: '李亭钰', key: '李亭钰' },
        { title: '张阳', key: '张阳' },
        { title: '王斌', key: '王斌' }
      ]
    },
    {
      title: '项目管理部',
      key: '项目管理部',
      children: [{ title: '吴迪', key: '吴迪' }]
    }
  ])

  // useEffect(() => {
  //   settagLoading(false)
  //   setoptions(defoptions)
  // }, [defoptions])
  // useEffect(() => {
  //   setcheckedValues(optionsValues)
  // }, [optionsValues])

  /* 删除 */
  const sliceCheckedValues = (num: number, e: string) => {
    const find = checkedValues.findIndex(item => item === e)
    if (find !== -1) {
      const newOptions = [...checkedValues]
      newOptions.splice(find, 1)
      setcheckedValues([...newOptions])
    }
  }

  /* 自动展开父节点 */
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true)
  /* 展开的数据 */
  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>(['AI产品部'])

  const onExpand: TreeProps['onExpand'] = expandedKeysValue => {
    console.log('onExpand', expandedKeysValue)
    setExpandedKeys(expandedKeysValue)
    setAutoExpandParent(false)
  }

  const onCheck: TreeProps['onCheck'] = (checkedKeysValue: any) => {
    // 过滤掉一级节点
    const filteredKeys = checkedKeysValue.filter(key => !options.some(option => option.key === key))
    // setcheckedValues(checkedKeysValue)
    setcheckedValues(filteredKeys)
  }

  const onSelect: TreeProps['onSelect'] = (selectedKeysValue, info) => {
    console.log('onSelect', info)
    console.log('selectedKeysValue', selectedKeysValue)
    // setcheckedValues(selectedKeysValue)
  }

  const caseLeft = () => {
    return (
      <div
        className="accreditDia_case flexCol"
        style={{ borderTopRightRadius: '0', borderBottomRightRadius: '0', paddingTop: '0' }}
      >
        <div className="flexRow flexRowJustBet accreditTitle" style={{ height: '48px' }}>
          企业成员
        </div>
        {/* ai推荐 自定义创建 */}
        <div className="caseOverFlowY_tagDialog">
          {options.length === 0 ? (
            <Empty description={t('empty')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
          ) : (
            <Tree
              height={380}
              checkable
              /* 展开/收起节点时触发	 */
              onExpand={onExpand}
              /*  展开的data */
              expandedKeys={expandedKeys}
              /* 自动展开父节点 */
              autoExpandParent={autoExpandParent}
              /* 选中 */
              onCheck={onCheck}
              checkedKeys={checkedValues}
              /* 选择 */
              onSelect={onSelect}
              /* 受控 = 设置选中的树节点，多选需设置 multiple 为 true */
              selectedKeys={[]}
              treeData={options}
            />
          )}
        </div>
      </div>
    )
  }
  const caseRight = () => {
    return (
      <div
        className="accreditDia_case flexCol"
        style={{ borderTopLeftRadius: '0', borderBottomLeftRadius: '0', borderLeft: '0', paddingTop: '0' }}
      >
        <div className="flexRow flexRowJustBet" style={{ height: '48px' }}>
          <span className="accreditTitle">
            已选成员：
            <span className="accreditTitle_num">{checkedValues.length}</span>
          </span>
          <span
            className="accreditTitle_close cursonCase"
            onClick={() => {
              setcheckedValues([])
            }}
          >
            清空
          </span>
        </div>
        {checkedValues.length === 0 ? (
          <Empty description={t('empty')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
        ) : (
          <div className="caseOverFlowY_tagDialog caseOverFlowY" style={{ overflowY: 'scroll' }}>
            {Array.isArray(checkedValues) &&
              checkedValues?.map((value, index) => {
                return (
                  <div key={value} className="flexRow flexRowJustBet caseMarBot">
                    <span>{value}</span>
                    <svg
                      onClick={e => {
                        sliceCheckedValues(index, value)
                      }}
                      className="cursonCase"
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M4 4L12 12"
                        stroke="#7587A5"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                      <path
                        d="M4 12L12 4"
                        stroke="#7587A5"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      />
                    </svg>
                  </div>
                )
              })}
          </div>
        )}
      </div>
    )
  }
  return (
    <ModalComponent
      title={'授权管理'}
      width={640}
      content={
        <div className="flexCol">
          <div className="flexRowStart" style={{ marginTop: '12px', marginBottom: '8px' }}>
            {caseLeft()}
            {caseRight()}
          </div>
        </div>
      }
      okText={t('confirmButton')}
      cancelText={t('cancel')}
      onCancel={() => {
        cancel()
      }}
      onOk={() => {
        showMessage({
          content: '授权成功',
          type: 'success'
        })
        setTimeout(() => {
          submit(checkedValues)
        }, 1000)
      }}
    />
  )
}

export default AccreditDia
